<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
			*{
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			
			body{
				width: 100%;
				height: 100%;
				background: #fcc7c7;
				
				
			}
			.jic{
				width: 750px;
				height: 1280px;
				background:url(img/1.jpg) no-repeat center top;
				margin: auto;
				margin-top: 20px;
				overflow: hidden;
				position: relative;
			}
			.xtx{
				font-size: 50px;
				color:#ffb7a9;
				margin-left: 20px;
				margin-top: 40px;
				font-family: Segoe Script;
			}
			.txt{
				font-size: 20px;
				color:#ffb7a9;
				margin-left: 20px;
				font-family: Segoe Script;
			}
			.px{
				color: #ffb7a9;
				font-weight: bolder;
				font-size: 30px;
				margin-top: 900px;
				margin-left: 20px;
				line-height: 50px;
			}
			.list{
				position: absolute;
				color: #ffb7a9;
				font-size: 30px;
				text-shadow: 2px 2px 10px red;
				z-index: 999999;
			}
			.xz{
				width: 400px;
				right: 0;
				bottom: 0;
				height: 400px;
				position: absolute;
				z-index: 999;
			}
			.xz img{
				width: 400px;
				height: 400px;
			}
			.wyb{
				float: right;
				color: #ffb7a9;
				font-weight: bolder;
				font-size: 30px;
				font-family: Tempus Sans ITC;
				margin-right: 80px;
				margin-top: 5px;
				z-index: 999;
				position: relative;
			}
			.zyl{
				width: 100%;
				height: 400px;
				margin-top: 20px;
				background-color: #2b2c2a;
				overflow: hidden;
			}
			.zyx{
				color: #fff;
				text-align: center;
				font-size: 20px;
				color:#fff;
				margin: auto;
				margin-top: 50px;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<audio src="img/gd.mp3" autoplay="autoplay"></audio>
		<div class="jic" >
			<p class="xtx" id="meli">0</p>
			<p class="txt" id="time">0</p>
			<div class="px">
				<p>今年还剩余<span id="xiao">0</span></p>
				<p>今天还剩余<span id="zhan">0</span></p>
				<p>云间揽小鹿，怀里有神君</p>
				
			</div>
			<div class="xz"><img src="img/2.png"/></div>
			<p class="wyb">yunjianlanxiaolu</p>
		</div>
		<div class="zyl">
			<div class="zyx">
				<p>制作人：肖夫人  | qq:3336172484  | qq邮箱：3336172484@qq.com</p>
				<p>希望天底下所有温柔而又美丽的小仙女，能够诛邪退避，百事天忌，平安喜乐，万事胜意</p>
				<p>愿你历经山河 觉得人间值得 愿你平安无疾 前程似锦 被世界温柔以待</p>
				<p>云间揽小鹿 | 如果这个世界不温柔，没关系 请让我试试，让我成为你们的全世界</p>
				<p>If this world is not gentle, it does not matter, please let me try, let me be your world</p>
				<p>A deer in the clouds, a god in the arms</p>
				
			</div>
		</div>
		
		
		<script>
			
			window.onload = function(){
				function showTime(){
					var omeli = document.getElementById("meli");
					var otime = document.getElementById("time");
					var date = new Date();
					var year = date.getFullYear();
					var month= date.getMonth()+1;
					var day = date.getDate();
					var hours = date.getHours();
					if(hours>9){
						hours=hours
					}else{
						hours="0"+hours;
					}
					var minutes = date.getMinutes();
					if(minutes>9){
						minutes=minutes;
					}else{
						minutes="0"+minutes;
					}
					var seconds = date.getSeconds();
					if(seconds>9){
						seconds=seconds;
					}else{
						seconds="0"+seconds;
					}
					var week = date.getDay();
					var xq = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]
					omeli.innerHTML = hours+":"+minutes+":"+seconds;
					otime.innerHTML = year+"年"+month+"月"+day+"日 "+"| " +xq[week];
				}
				
				showTime();
				
				setInterval(function(){
					showTime()
				},1000)
				
					var oxiao = document.getElementById("xiao");
					var oyuel = document.getElementById("yuel");
					var ozhan = document.getElementById("zhan");
					function startTime(){
						var newtime = new Date();//获取现在时间
						var endtime = new Date("2022/01/01");//获取2021/10/05时间
						//getTime()获取毫秒数 1970 1 1
	
						//获取设置时间的毫秒数-当前时间的毫秒数=剩余时间(倒计时)
						var sysj = endtime.getTime() - newtime.getTime();
						//获取天数
						var day = Math.floor(sysj/1000/60/60/24);
						//获取小时
						var hours = Math.floor(sysj/1000/60/60%24);
						//获取分钟
						var feng = Math.floor(sysj/1000/60%60);
						//获取秒
						var miao = Math.floor(sysj/1000%60);
						oxiao.innerHTML = day+"天";
						
						ozhan.innerHTML = hours+"小时"+feng+"分"+miao+"秒";
						
					}
					startTime();
					setInterval(startTime,1000)
				var body = document.getElementById("body");
				var w = window.innerWidth;
				var h = window.innerHeight;
				
				document.onclick = function(e){
					var x = e.clientX;
					var y = e.clientY;
					console.log(x+":"+y)
					createDiv(x,h,y)
				}
				
				function createDiv(x,h,y){
					var div = document.createElement("div");
					var hearts = document.createTextNode("♥");
					div.setAttribute("class","list");
					div.style.left = x+"px";
					div.style.top = h+"px";
					div.appendChild(hearts);
					document.body.appendChild(div);
					move(div,x,y)
					
					
				}
				
				function move(div,x,y){
					setInterval(function(){
						if(div.offsetTop<=y){
							div.parentNode.removeChild(div);
							//body.removeChild(div)
							createAllhearts(x,y)
							var audio = new Audio();
							audio.src="img/music.mp3";
							audio.play()
						}else{
							div.style.top = div.offsetTop-10+"px"
						}
						
					},10)
				}
				
				
				function createAllhearts(x,y){
					for(var i=0;i<50;i++){
						var div = document.createElement("div");
						var hearts = document.createTextNode("♥");
						div.setAttribute("class","list");
						div.appendChild(hearts);
						div.style.left = x+"px";
						div.style.top = y+"px";
						document.body.appendChild(div);
						div.spX = parseInt(Math.random()*25-10);
						div.spY = parseInt(Math.random()*15-10);
						moveDown(div,div.spX,div.spY)
					}
				}
				function moveDown(div,spx,spy){
					setInterval(function(){
							if(div.offsetLeft<0||div.offsetLeft>w||div.offsetTop>h){
								div.parentNode.removeChild(div);
							}else{
								div.style.top = div.offsetTop+div.spY+"px";
								div.style.left = div.offsetLeft+div.spX+"px";
								div.spY++;
							}
						},24)
				}
				
				
			}
			
		</script>
		